import React from 'react'
import "./style.scss"
import img from "../../imgs/内网通截图20211201200647.png"
import {NavLink,useNavigate} from "react-router-dom"
function Index() {
    const tabs=[
        {
            title:'整租',
            icons:'https://js.baletoo.cn/static/wx/common/zhengtaoIcon.png?2',
            path:'/list'
        },
        {
            title:'合租',
            icons:'https://js.baletoo.cn/static/wx/common/danjianIcon.png?2',
            path:'/list'
        },
        {
            title:'品牌公寓',
            icons:'https://js.baletoo.cn/static/wx/common/gongyuIcon.png?2.1',
            path:'/list'
        },
        {
            title:'找室友',
            icons:'https://js.baletoo.cn/static/wx/common/shiyouIcon.png?2',
            path:'/list'
        }
    ]
    const navigate=useNavigate()
    const toSearch=()=>{
        navigate('/search')
    }
    return (
        <div className='box'>
            <header>
                <span>上海</span>
                <span>👨🏻</span>
            </header>
            <main>
                <div className="shows">
                    <img src={img} alt="" />
                <div className="ipt" onClick={toSearch}>
                    <span>🔍</span>
                    <input type="text" placeholder='输入小区、地铁搜索房源'/>
                </div>
                </div>
                <div className="icons">
                    {
                        tabs.map((v,i)=>{
                            return(
                                <NavLink key={i} to={v.path}>
                                    <img src={v.icons} alt="" />
                                    {v.title}
                                </NavLink>
                            )
                        })
                    }
                </div>
            </main>
        </div>
    )
}

export default Index
